<template>

  <el-table
    ref="multipleTable"
    type="index"
    stripe
    fit
    height="100%"
    highlight-current-row
    border
    :header-cell-style="{background:'#eef1f6',color:'#606266' }"
    :data="tableData"
    :row-style="{height: '40px'}"
    :cell-style="{padding: '5px'}"
    tooltip-effect="dark"
    style="width: 100%"
    :class="isDialog ? '':'container'"
    @row-dblclick="handleRowDoubleClick"
    @current-change="handleCurrentChangeRow"
    @selection-change="handleSelectionChange"
  >
    :default-sort = "{prop: 'date', order: 'descending'}"
    <el-table-column
      v-if="tableIndex==='selection'"
      type="selection"
      width="55"
    />
    <el-table-column
      v-if="tableIndex==='index'"
      type="index"
      width="55"
      label="序号"
    />
    <el-table-column
      v-for="(item1, index) in tableColumn"
      :key="index"
      :prop="item1.prop ? item1.prop : ''"
      :label="item1.label"
      :filters="filters(item1.prop)"
      :filter-method="filterHandler"
      sortable
    >
      <template slot-scope="scope">
        <div v-if="item1.edit && scope.row.edit">
          <el-input v-if="item1.type==='string'" v-model="scope.row[item1.prop]" size="small" />
          <el-select v-if="item1.type==='select'" v-model="scope.row[item1.prop]" size="small">
            <el-option label="已下单" value="0" />
            <el-option label="未发货" value="1" />
            <el-option label="已发货" value="2" />
            <el-option label="已完成" value="3" />
          </el-select>
          <el-date-picker
            v-if="item1.type==='date'"
            v-model="scope.row[item1.prop]"
            type="date"
            size="small"
            placeholder="选择日期"
          />
          <el-autocomplete
            v-if="item1.type==='autocomplete'"
            v-model="scope.row[item1.prop]"
            popper-class="my-autocomplete"
            :fetch-suggestions="querySearch"
            placeholder="请输入内容"
            size="small"
            @select="handleSelect"
          >
            <i
              slot="suffix"
              class="el-icon-edit el-input__icon"
              @click="handleIconClick"
            />
            <template slot-scope="{ item }">
              <div class="name">{{ item.goods_id }}</div>
              <span class="addr">{{ item.name }} {{ item.color }}</span>
            </template>
          </el-autocomplete>
          <el-input-number
            v-if="item1.type==='number'"
            v-model="scope.row[item1.prop]"
            :max="scope.row.quantity - scope.row.has_received_quantities - scope.row.has_returned_quantities"
            size="small"
            label="描述文字"
            @change="handleChange"
          />
        </div>
        <span v-else>{{ scope.row[item1.prop] }}</span>
      </template>
    </el-table-column>
    <el-table-column
      v-if="operate"
      style="top: 10px"
      fixed="right"
      label="操作"
      width="150"
    >
      <template slot-scope="scope">
        <el-button
          v-if="scope.row.order_status !== 4"
          type="text"
          icon="el-icon-edit"
          size="small"
          @click="edit(scope.row)"
        >编辑
        </el-button>
        <el-button
          v-else
          type="text"
          icon="el-icon-view"
          size="small"
          @click="edit(scope.row)"
        >查看
        </el-button>

        <el-button type="text" icon="el-icon-delete" size="small" @click="del(scope.row)">删除</el-button>
      </template>
    </el-table-column>
    <el-table-column
      v-if="isDialog"
      style="top: 10px"
      min-width="100px"
      fixed="right"
      label="操作"
      width="100"
    >
      <template slot-scope="scope">
        <el-button
          v-if="scope.row.quantity !== null && tableData.length !== 1"
          type="text"
          icon="el-icon-delete"
          size="small"
          :disabled="scope.row.order_status === 4"
          @click="dialogDel(scope.row)"
        >删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>

</template>

<script>

import item from '@/layout/components/Sidebar/Item.vue'

export default {
  name: 'PurchaseOrderTable',
  props: {
    tableData: {
      type: Array,
      default: () => []
    },
    tableColumn: {
      type: Array,
      default: () => []
    },
    tableIndex: {
      type: String,
      default: () => ''
    },
    operate: {
      type: Boolean,
      default: () => false
    },
    isDialog: Boolean
  },
  data() {
    return {
      multipleSelection: [],
      currentRow: { visible: false },
      currentTableData: [],
      visible: false
    }
  },
  computed: {
    item() {
      return item
    }
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    handleRowDoubleClick(row) {
      row.edit = true
      this.$emit('handleRowDoubleClick', row)
    },
    handleCurrentChangeRow(val, oldVal) {
      if (oldVal) {
        oldVal.edit = false
      }
      this.currentRow = val
    },
    querySearch(queryString, cb) {
      let results = []
      queryString ? queryString.split('-').forEach((item1, index) => {
        if (item1 && index === 0) {
          results = this.$store.state.basic_data.products.filter(item =>
            `${item.name.toLowerCase()}${item.goods_id.toLowerCase()}${item.code}${item.color}`
              .includes(item1.toLowerCase()))
        } else if (item1) {
          results = results.filter(item =>
            `${item.name.toLowerCase()}${item.goods_id.toLowerCase()}${item.code}${item.color}`
              .includes(item1.toLowerCase()))
        }
      }) : results = this.$store.state.basic_data.products
      results.forEach(item => {
        item.value = item.goods_id
      })
      // 调用 callback 返回建议列表的数据
      console.log(results)
      cb(results)
    },
    handleSelect(item) {
      this.currentRow = this.tableData.find(item => item.edit)
      this.currentRow.product_name = item.name
      this.currentRow.color = item.color
      this.currentRow.goods_id = item.goods_id
      this.currentRow.product_id = item.id
      this.currentRow.product_specification = item.code
      if (this.tableData.every(item => item.product_code !== '')) {
        this.$emit('handleSelect')
      }
    },
    handleIconClick(ev) {
      console.log(5)
      console.log(ev)
    },
    edit(row) {
      this.$emit('editRow', row)
    },
    del(row) {
      this.$emit('deleteRow', row)
    },
    handleChange(value) {
      console.log(value)
    },
    dialogDel(row) {
      console.log(row)
      this.$emit('dialogDel', row)
    },
    filterHandler(value, row, column) {
      const property = column['property']
      return row[property] === value
    },
    filters(val) {
      const filter = this.tableData.map(item => {
        return {
          text: item[val],
          value: item[val]
        }
      })
      return filter.reduce((accumulator, currentValue) => {
        if (!accumulator.some(item => item.value === currentValue.value)) {
          accumulator.push(currentValue)
        }
        return accumulator
      }, [])
    }
  }
}

</script>

<style lang="scss" scoped>
.container {
  //padding: 10px;
  background: #fff;
  border-radius: 4px;
  height: 100%;

  ::v-deep .el-table__row {
    padding: 5px;
  }
}

.containerForDialog {
  padding: 10px;
  background: #fff;
  border-radius: 4px;
  height: 65vh;

  ::v-deep .el-table__row {
    padding: 5px;
  }
}

.my-autocomplete {
  li {
    line-height: normal;
    padding: 7px;

    .name {
      text-overflow: ellipsis;
      overflow: hidden;
    }

    .addr {
      font-size: 12px;
      color: #b4b4b4;
    }

    .highlighted .addr {
      color: #ddd;
    }
  }
}

</style>
